var oul = document.querySelector(".ulbox")
var oli = document.querySelectorAll("li")
var libox  = []
var divbox = []
const xhr1 = new XMLHttpRequest();
xhr1.open("get","http://chst.vip:1234/api/getcategorytitle",false)     
xhr1.onreadystatechange = function(){
    if(xhr1.readyState===4 && xhr1.status===200){
        let res1 = JSON.parse(xhr1.responseText);
        console.log(res1);
        console.log(res1.result);
        let ele1 = "";
        res1.result.forEach(item1 => {
            //console.log(item1.titleId);
            libox.push(item1.titleId)
            ele1 += `<li>
                        <a href="">${item1.title}
                            <span>▼</span>
                        </a>
                        <div></div>
                    </li>`
        });
        oul.innerHTML = ele1
    }
}
xhr1.send();
console.log(libox);
console.log(oul);


        libox.forEach(value => {
            const xhr2 = new XMLHttpRequest();
            xhr2.open("get","http://chst.vip:1234/api/getcategory?titleid="+value,false)   
            xhr2.onreadystatechange = function(){
                if(xhr2.readyState===4 && xhr2.status===200){
                    let res2 = JSON.parse(xhr2.responseText);
                    //console.log(res2);
                    let ele2 = "";
                    res2.result.forEach(item => {
                        ele2 += `<p>${item.category}</p>`       
                    });
                    divbox.push(ele2);
                    ele2 = "";     //为下次点开抽屉做准备
                }
            }
            xhr2.send();
        })
        console.log(divbox);


        // 获取到 每个 div 给 div中 写入 存在数组中的 内容
        let aDiv = document.querySelectorAll(".ulbox li div")
        console.log(aDiv);
        aDiv.forEach((item,index)=>{
            console.log(item)
            //console.log(divbox[index])
            item.innerHTML = divbox[index];
        });


        //抽屉效果
        // $('.ulbox').find('div').slideUp(0,function(){
        //     $(".ulbox").css("display","block");
        // })
        $('.ulbox li').click(function(){
            $(this).find('div').slideToggle().parent().siblings().find('div').slideUp();
        })

        //跳转到详情页
        var ap = document.querySelectorAll("li div p")
        console.log(ap);
        ap.forEach((item,value)=>{
            item.onclick = function(){
                console.log(this);
                console.log(value);
                location.href = "../pages/bijia.html?title="+this.innerText+"&categoryid="+value
            }})

        
        //location.href = "../pages/03 商品列表功能页.html?categoryId="+value+"&title="+this.innerText
        // <a href='商品列表功能页.html?categoryId='+${item.categoryId}>